<template>
    <page-view class="order-page">
        <page-header title="订单">
            <span class="iconfont iconfenxiang-"></span>
        </page-header>
        <div class="content-box" v-if="orderList">
            <div class="content-item" v-for="(item,index) in orderList" :key="index">
                <p class="oid">订单编号：{{item.oid}}</p>
                <div class="title">
                    <p>{{item.subtime | FramDate}}</p>
                    <p class="state">{{item.status == 0 ? "未完成" : "已完成"}}</p>
                </div>
                <div class="foodsList" v-for="(_item,_index) in item.items" :key="_index">
                    <span>{{_index+1}}. {{_item.food.fname}}</span>
                    <span>￥{{_item.food.price}}元</span>
                </div>
                <div class="btn-group">
                    <div class="del-btn">
                        <button>删除</button>
                    </div>
                    <div class="btn-list">
                        <button class="evaluation-btn" @click="toOrderDetail(item.oid)">评价</button>
                        <button class="again-btn">再来一单</button>
                    </div>
                </div>
            </div>
        </div>
    </page-view>
</template>
<script>
import {mapState} from "vuex";
import {FramDate} from "../utils/FramDate";
    export default {
        name: "Order",
        data() {
            return {
                orderList: null
            }
        },
        computed:{
            ...mapState(["userInfo"])
        },
        filters:{
            FramDate
        },
        created(){
            this.getOrderList();
        },
        activated(){
            if(this.$route.query.action == "refresh"){
                this.getOrderList();
            }
        },
        methods:{
            async getOrderList(){
                const loading = this.$msg.loading({
                    title: "正在加载中",
                    duration: -1,
                    hasMask: true,
                    position: "center"
                });
                try {
                    let result = await this.$api.order.getOrderList(this.userInfo.sno);
                    this.orderList = result.data;
                } catch (error) {
                    console.log(error);
                } finally {
                    loading.close();
                }
            },
            toOrderDetail(oid){
                this.$router.push({
                    name:"OrderDetail",
                    query:{
                        oid
                    }
                });
            }
        }
    }
</script>
<style lang="scss" scoped>
    .order-page {
        @include flexbox(column);

        .content-box {
            flex: 1;
            overflow: auto;
            margin-bottom: 55px;
            .content-item{
                box-sizing: border-box;
                padding: 5px;
                border-bottom: 1px solid gray;
                line-height: 1.5;
                .oid{
                    font-size: 16px;
                    font-weight: bold;
                }
                .title{
                    font-size: 12px;
                    @include flexbox(row,space-between,center);
                    .state{
                        color: #cccccc;
                    }
                }
                .foodsList{
                    border-bottom: 1px dotted gray;
                    @include flexbox(row,space-between,center);
                    padding: 4px 0;
                }
                .btn-group{
                     @include flexbox(row,space-between,center);
                     margin-top: 4px;
                     .del-btn{
                         button{
                             width: 50px;
                             height: 25px;
                             border: none;
                             background-color: red;
                             outline: none;
                             color: white;
                         }
                     }
                     .btn-list{
                         .evaluation-btn{
                             width: 50px;
                             height: 25px;
                             border: 1px solid currentColor;
                             background-color: #fff;
                             outline: none;
                             color: gray;
                         }
                         .again-btn{
                             @extend .evaluation-btn;
                             width: 70px;
                             color: $primaryColor;
                             margin-left: 10px;
                         }
                     }
                }
            }
        }
    }
</style>